<template>
    <fieldset>
        <legend>常用api</legend>
        <h1 id="hh" ref="hh">{{ msg }}</h1>
        <input type="text" ref="ipt">
        <button @click="handleClick">点击</button>
        <Child ref="child"></Child>
    </fieldset>
</template>

<script>
import Child from './child.vue'
export default{
    components:{
        Child
    },
    data(){
        return{
            msg:"丨"
        }
    },
    mounted(){
        console.log(this.$root);
        console.log(this.$parent);        
    },
    methods:{
        handleClick(){
            console.log(document.getElementById('hh').innerText);
            this.msg='s'

            // mutation.observer

            //获取数据更新之后的dom
            // this.$nextTick(()=>{
            //     console.log(document.getElementById('hh').innerText);
            // }) 
            
            // Promise.resolve().then(()=>{
            //     console.log(document.getElementById('hh').innerText);
            // })

            // setImmediate(()=>{
            //     console.log(document.getElementById('hh').innerText);
            // })

            // setTimeout(()=>{
            //     console.log(document.getElementById('hh').innerText);
            // })

        //    console.log(this.$refs.hh.innerText);

        this.$refs.ipt.focus()

        console.log(this.$refs);
        this.$refs.child.change()
        
           
        }
    }
}
</script>